import {useEffect,useState,useRef} from 'react'
import { Table, Input, Button, Checkbox } from 'antd';
import {useSelector,useDispatch} from 'umi'
import styles from './Mail.less'
 let columns:any=[
   
    {
        title:'发件人',
        render:()=><Checkbox></Checkbox>
    },
    {
        title:'收件人',
        dataIndex:'to'
    },
    {
        title:'主题',
        dataIndex:'subject'
    },
    {
        title:'发送时间',
        dataIndex:'createAt'
    },
    {
        title:'操作',
        render:()=><a>删除</a>
    }
 ]
const Mail:React.FC=()=>{
    const [dataSource,setDataSource]=useState([])
    const state = useSelector((state:{Mail:any}) => state.Mail)
    const [title,settitle]=useState('')
    const dispatch = useDispatch()
    useEffect(()=>{
        dispatch({
            type:'Mail/query'
        })
        setDataSource(state.list[0])
    },[])
    console.log(state.list[0])
    const onButtonClick = () => {
        
      };
    return <div>
        <section className={styles.top}>
            <div className={styles.div}>
            <div>发件人：<Input  placeholder="请输入发件人" value={title} /></div>
            <div>收件人：<Input placeholder="请输入收件人"  /></div>
            <div>主题：<Input placeholder="请输入主题" /></div>
            </div>
            <div className={styles.button}>
            <Button type="primary">搜索</Button>
            <Button onClick={onButtonClick}>重置</Button>
            </div>
        </section>
        <Table rowKey="id" dataSource={dataSource} columns={columns} scroll={{x:1200}}></Table>
    </div>
}
export default Mail


